<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for 指令的使用</title>
</head>
<body>
<div id="app">
    <div v-for="content in contents">{{ content }}</div>
    <!--  v-for 指令在同一个元素中只能出现一次  -->
    <!--    <hr>-->
    <!--    <div v-for="content in contents" v-for="item in items">{{ content }}{{ item }}</div>-->
    <!--    <hr>-->
    <!--    <div v-for="item in items" v-for="content in contents" >{{ content }}{{ item }}</div>-->

    <div v-for="i in arr">{{ i[0 ]}} {{ i[1] }}</div>
    <hr>
    <div v-for="(value, key) in obj">{{ key }} : {{ value }}</div>

    <div v-if="contents.length === items.length" v-for="i of contents.length">{{ contents[i-1]}} {{ items[i-1]}}</div>

</div>
<script src="../../../js/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                contents: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                items: ['h', 'i', 'j', 'k', 'l', 'm', 'n'],


                // arr: [
                //     ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                //     ['h', 'i', 'j', 'k', 'l', 'm', 'n'],
                // ]

                arr:[
                    ['a','h'],
                    ['b','i'],
                    ['c','j'],
                    ['d','k'],
                    ['e','l'],
                    ['f','m'],
                    ['g','n'],
                ],

                obj:{
                    'a':'h',
                    'b':'i',
                    'c':'j',
                }
            }
        },
        methods: {}
    })

    app.mount("#app")
</script>
</body>
</html>